<template>
  <el-dialog
    v-model="isShow"
    :title="title"
    width="80%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <h6><b>运单信息</b></h6>
    <el-descriptions :column="3" class="mt-4">
      <el-descriptions-item label-align="right" label="运单号">{{row.publicName}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="接单时间">{{row.publicKey}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="发货地">{{row.publicValue}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="收货地">
        <el-tag size="small">{{proxy.$util.selectName(row.status, optionData.statusType)}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="装运说明">{{row.createTime}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="备注">{{row.createTime}}</el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <h6 class="mb-4">
      <b>司机信息</b>
    </h6>
    <el-descriptions :column="2" class="mt-4">
      <el-descriptions-item label-align="right" label="司机">{{row.createTime}}</el-descriptions-item>
      <el-descriptions-item label-align="right" label="车牌号">{{row.createTime}}</el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <h6 class="mb-4">
      <b>管理订单</b>
    </h6>
    <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
          >
          <el-table-column label="序号" type="index" width="80" />
          <el-table-column label="订单号" prop="publicKey" />
          <el-table-column label="紧急程度" prop="publicKey" />
          <el-table-column label="合同类型" prop="publicKey" />
          <el-table-column label="托运人" prop="publicKey" />
          <el-table-column label="承接人" prop="publicKey" />
          <el-table-column label="发货人" prop="publicKey" />
          <el-table-column label="发货地" prop="publicKey" />
          <el-table-column label="计划收货时间" prop="publicKey" />
          <el-table-column label="货物" prop="publicKey" />
          <el-table-column label="总量" prop="publicKey" />
          <el-table-column label="合同金额（元）" prop="publicKey" />
          <el-table-column label="装运量" prop="publicKey" />
          <el-table-column label="签收量" prop="publicKey" />
          <el-table-column label="运输方式" prop="publicKey" />
          <el-table-column label="定价类型" prop="publicKey" />
          <el-table-column label="参考单价（元）" prop="publicKey" />
          <el-table-column label="创建人" prop="publicKey" />
          <el-table-column label="创建时间" prop="publicKey" />
    </el-table>
    <el-divider />
    <h6 class="mb-4">
      <b>运输进度</b>
    </h6>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="8">
        <el-steps direction="vertical" :active="1">
          <el-step title="2024-01-01">
            <template #description>
              <p>河南省郑州市xxx区</p>
              <p>司机装车</p>
            </template>
          </el-step>
          <el-step title="Step 2" />
          <el-step title="Step 3" />
        </el-steps>
      </el-col>
      <el-col :xs="24" :sm="16">
      
      </el-col>
    </el-row>

  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, ElMessageBox} from 'element-plus'
import { ref, reactive, inject, getCurrentInstance, ComponentInternalInstance } from 'vue';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
let optionData:any = inject('optionData'); 
const emit = defineEmits(['confirm']);
let isShow = ref(false);
let title = ref('运单跟踪');
let row:any = reactive({});
const init = (data:any) => {
  row = data;
  isShow.value = true;
};

const tableData = reactive([{id:1}]);
const handleClose = () => {
  console.log('关闭');
};
const toSubmit = async ()=>{
  
}
defineExpose({
  init,
})
</script>

<style>

</style>